<template>
    <div class="book-class-page">
        <div 
            class="loading"
            v-if="bookList.length == 0">
            <img src="@/assets/img/loading2.gif" alt="">
        </div>
        <ul 
            class="books"
            v-if="bookList.length > 0">
            <li 
                class="book"
                v-for="item,index in this.bookList"
                :key="index"
                @click="gotoDetail(item.id,item.title)">
                <img :src="item.cover" alt="">
                <div class="text">{{item.title}}</div>
            </li>
            <li class="loading" v-show="isLoading">
                <img src="@/assets/img/loading2.gif" alt="">
            </li>
        </ul>
    </div>
</template>

<script>
export default {
    name: 'bookClassPage',
    props: {
        tagData: Object,
    },
    data() {
        return {
            isLoading: false,
            pageNum: 1,
            bookList: [],
        }
    },
    methods: {
        // 加载更多书籍
        loadBook() {
            // 防止二次加载
            if(this.isLoading == false){
                this.isLoading = true;
                axios.get('https://apis.netstart.cn/yunyuedu/source/v2/searchBook.json?catId='+this.tagData.cateId+'&page='+this.pageNum)
                    .then((success)=>{
                        // console.log('book', success.list);
                        this.bookList = this.bookList.concat(success.list);
                        this.pageNum ++;
                        this.isLoading = false;
                    })
                    .catch((err)=>{
                        console.log(err);
                    })
            }
        },
        myOnScroll() {
            //变量scrollTop是滚动条滚动时,距离顶部的距离
            let scrollTop = document.documentElement.scrollTop||document.body.scrollTop;
            //变量windowHeight是可视区的高度
            let windowHeight = document.documentElement.clientHeight || document.body.clientHeight;
            //变量scrollHeight是滚动条的总高度
            let scrollHeight = document.documentElement.scrollHeight || document.body.scrollHeight;
            //滚动条到底部的条件
            if( scrollHeight - (scrollTop+windowHeight) < 200 ){
                //写后台加载数据的函数
                this.loadBook();
                // console.log('gogo');
            }
        },
        // 初始化我的轮动事件
        myInitScroll() {
            window.addEventListener('scroll',this.myOnScroll);
        },
        gotoDetail(id,name) {
            this.$router.push('/book-detail/'+id+'/'+name+'/m')
        }
    },
    mounted() {
        this.loadBook();
        this.myInitScroll();
    },
    destroyed() {
        window.removeEventListener('scroll',this.myOnScroll);
    }
}
</script>

<style lang="scss" scoped>
.books {
    display: flex;
    flex-wrap: wrap;
    padding: 20px;
    justify-content: space-between;
}
.book {
    font-size: 14px;
    width: 100px;
    margin-bottom: 15px;
    img {
        width: 100px;
        height: 150px;
    }
    .text {
        text-overflow:ellipsis;  /*文本裁切 显示省略号*/
        white-space: nowrap;  /*强制文本不换行*/
        overflow: hidden;  /*溢出文本隐藏*/
        width: 100px;
    }
}
.loading {
    width: 100%;
    height: 200px;
    position: relative;
    img {
        width: 100px;
        height: 100px;
        position: absolute;
        top: 50%;
        left: 50%;
        margin-left: -50px;
        margin-top: -50px;
    }
}
ul {
    .loading {
        height: 50px;
        img {
            width: 50px;
            height: 50px;
            margin-left: -25px;
            margin-top: -25px;
        }
    }
}
</style>